<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户编辑</title>
<link rel="stylesheet" type="text/css" href="../../css/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../../css/themes/icon.css" />
<script type="text/javascript" src="../../js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../js/ListData.js"></script>
<script type="text/javascript" src="../../js/ajaxfileupload.js"></script>
<script type="text/javascript" src="../../js/uuid.core.js"></script>
<script type="text/javascript">
	var filePath = "";
	jQuery.extend({
		handleError : function(s, xhr, status, e) {
			// If a local callback was specified, fire it
			if (s.error) {
				s.error(xhr, status, e);
			}
			// If we have some XML response text (e.g. from an AJAX call) then log it in the console
			else if (xhr.responseText) {
				filePath = xhr.responseText;
				console.log(xhr.responseText);
			}
		}
	});
	$(document).ready(function() {
	});

	function FileUploader(eid) {
		var fileElementID = eid;
		var formId = UUID.generate();
		var timer;
		var id = UUID.generate();

		this.upload = function() {
			timer = setInterval(getProgress, 100);
			$.ajaxFileUpload({
				url : '../../file/upload', //需要链接到服务器地址
				secureuri : true,
				fileElementId : fileElementID, //文件选择框的id属性
				dataType : 'json', //服务器返回的格式，可以是json
				data : {
					formId : formId,
					id : id,
				},
				success : function(str, status) {
					console.log(str);
					//alert("upload success!");
				}
			});
		}

		function getProgress() {
			$.ajax({
				async : false,
				type : "GET",
				url : "../../file/uploadprogress",
				data : {
					formId : formId,
					fieldName : fileElementID
				},
				success : function(data, state) {
					showProgress(data);
				},
				error : function(err, state) {
					alert("progress err:" + state);
					clearInterval(timer);
				}
			});
		}

		function showProgress(p) {
			$("#progress-" + fileElementID).progressbar("setValue", p);
			if (parseFloat(p) >= 100) {
				clearInterval(timer);
				$("#file1").attr("disabled", true);
				$("#warminfo").text("文件已上传成功，请点击“导入”按钮进行导入！");
				$("#button1").hide();
				$("#button2").show();
			}
		}
	}

	function upload(eid) {
		var uploader = new FileUploader(eid);
		uploader.upload();
	}

	function importFile() {
		$.post("../../file/import", {
			filePath : filePath
		}, function(str) {
			$("#warminfo").text("数据已导入成功！");
			$("#button2").hide();
		});
	}
</script>
<style type="text/css">
body {
	text-align: center;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}
</style>
</head>
<body style="margin: 0">
	<table width="100%" height="45" border="0" align="center" cellpadding="0" cellspacing="0">
		<tr>
			<td width="88%" align="center" class="test_bt">导入员工信息</td>
		</tr>
	</table>
	<table align="center" height="100%" width="100%">
		<tr>
			<td nowrap="nowrap" width="100" align="right">选择文件：</td>
			<td nowrap="nowrap" align="left">
				<div style="float: left;">
					<input type="file" name="file1" id="file1" />
				</div>
				<div class="easyui-progressbar" id="progress-file1" style="width: 150px; float: left"></div>
			</td>
		</tr>
		<tr>
			<td colspan="2" nowrap="nowrap" align="left"><span style="color: #F00;" id="warminfo"></span></td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<button name="button1" id="button1" onclick="upload('file1')">上传</button>
				<button name="button2" id="button2" onclick="importFile()" style="display: none">导入</button>
			</td>
		</tr>
	</table>
</body>
</html>